<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/projectAdmin/make'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                 <el-form-item label="预约门店">
                    <el-select v-model="paging.username" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                  </el-form-item>
                    <el-form-item label="顾客姓名：">
                        <el-input style="width:200px" v-model="paging.username"></el-input>
                    </el-form-item>
                    <el-form-item label="预约时间：">
                        <el-date-picker style="width:200px" v-model="paging.username" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                   <el-form-item label="手机号码：">
                        <el-input style="width:200px" v-model="paging.username"></el-input>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <!-- <div class="title-left"> 分销列表 </div> -->
                    <el-button icon="el-icon-plus" @click="setRow()" style="margin-left:auto;" type="primary">新增</el-button>
                    <el-button icon="el-icon-download">导出</el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column width="70px" label="预约门店" prop="t1"></el-table-column>
                    <el-table-column width="70px" label="预约ID" prop="id"></el-table-column>
                    <el-table-column prop="t2" label="顾客姓名" width="130"> </el-table-column>
                    <el-table-column prop="t3" label="性别" min-width="70"> </el-table-column>
                    <el-table-column prop="t4" label="手机号码" min-width="150"> </el-table-column>
                    <el-table-column prop="t5" label="预约日期" min-width="150"> </el-table-column>
                    <el-table-column prop="t6" label="时间" min-width="150"> </el-table-column>
                    <el-table-column prop="t7" label="预约到店时间" min-width="140"> </el-table-column>
                    <el-table-column prop="t8" label="预约人数"> </el-table-column>
                    <el-table-column prop="t9" label="点单编号"> </el-table-column>
                    <el-table-column prop="t10" label="总金额"> </el-table-column>
                    <el-table-column prop="t10" label="预付金额"> </el-table-column>
                    <el-table-column prop="t11" label="备注"> </el-table-column>
                    <el-table-column fixed="right" width="109" label="操作">
                        <template slot-scope="scope">
                            <span @click="setRow(1,scope.row)" class="tab-table-text">查看</span>
                            <span @click="setRow(1,scope.row)" class="tab-table-text">编辑</span>
                            <span @click="setRow(2,scope.row)" class="tab-lv-text">开单</span>
                            <span @click="setRow(2,scope.row)" class="tab-red-text">消单</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="sizes,prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div> -->
            </div>
        </div>
        <router-view></router-view>
        <el-dialog
            title="消单原因"
            :visible.sync="dialogVisible"
            width="30%"
           >
            <p class="p1">订单取消后无法恢复，请考虑好再操作</p>
            <div class="groupList">
                <div class="list">
                    <p v-for="(ele,index) in resultList" :key="index" @click="chiose(ele,index)">
                        <span>{{ele.name}}</span>
                        <i :class="ele.check ? 'el-icon-success' : 'el-icon-circle-check' "></i>
                    </p>
                </div>
                <p>
                    <span>其他</span>
                    <el-input v-model="paging.username" type="text" class="fill"></el-input>
                    <span>（请填写）</span>
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">暂不取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确定取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            resultList:[
                {name:'请选择取消订单原因',check:true},
                {name:'顾客行程有变，不能来店',check:false},
                {name:'顾客约错门店，重新预约其他门店',check:false},
                {name:'顾客找不到门店位置',check:false},
                {name:'超过预约时间，但联系不上顾客',check:false},
                {name:'顾客觉得停车不方便',check:false},
                {name:'顾客指定的技师被约满',check:false},
                {name:'房间满员/顾客不愿意拼房',check:false}
            ],
            dialogVisible:true,
             options: [
                {
                    value: '正大店',
                    label: '正大店'
                }
            ],
            paging:{
                username:''
            },
            tableData: [
                {
                    t1:"1",
                    t2:'20224114556',
                    t3:'张晓春(001)',
                    t4:'技师',
                    t5:'17630568059',
                    t6:'事假',
                    t7:'2021-07-01',
                    t8:'1',
                    t9:'1',
                    t10:'1',
                    t11:'1',
                }
            ],
            loading:false,
        };
    },
    methods: {
        chiose(ele,index){
            ele.check = !ele.check
        },
        async setRow(type, row) {
            this.utils.goUrl('/projectAdmin/make/makeDetails')
            return;
        },
        reset(){

        },

    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
p{
    margin: 0;
}
.p1{
    text-align: center;
    color: #666;
    font-size: 16px;
    line-height: 40px;
    background: #f1f1f1;
    margin-bottom: 20px;
}
.groupList{
    .list{
       p{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 15px 0;
       }
       .el-icon-circle-check{
           color: #666;
           font-size: 20px;
       }
       .el-icon-success{
           font-size: 20px;
           color: #409EFF;
       }
    }
}
.fill{
    width: 100px !important;
    ::v-deep{
        .el-input__inner{
           border:1px solid #fff;
           border-bottom: 1px solid #DCDFE6;
           line-height: 20px;
           height: 20px;
        }
    }
}
::v-deep{
    .el-dialog__body{
        padding: 0 20px;
    }
}
</style>